<template>
	<view>
		<view class="Lu-class-body">
			<view v-if="classmercharts.length == 0" class="Lu-class-404">
				<image src="../../static/image/404.png"></image>
			</view>
			<view class="campus-box" v-else>
				<view class="campus-item" v-for="(item,index) in classmercharts" :key="index" @click="navTo(item)">
					<view class="campus-media">
						<image class="campus-logo" :src="apiUrl + item.pic"></image>
					</view>
					<view class="campus-body">
						<view class="campus-title">{{item.name}}</view>
						<view class="campus-desc">主要课程：{{item.describe}}</view>
						<view class="campus-footer">
							<text class="iconfont icon-xsm"></text>{{item.people_num}}名会员加入</text>
						</view>
						<view class="campus-footer">
							<text class="iconfont icon-dingwei"></text>{{item.address}}</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default{
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl'])
		},
		data(){
			return{
				searchcontent:'',
				classmercharts:[]
			}
		},
		onLoad: function(option) {
			console.log(option)
			this.searchcontent = option.content;
			this.getsearchcontent()
		},
		onShow:function(){
			
		},
		
		methods:{
			getsearchcontent:function(){
				uni.request({
					url:this.apiUrl +'api/search',
					data:{
						type:1,
						content:this.searchcontent
					},
					header:{
						openid:this.openId
					},
					method:'POST',
					success: (res) => {
						this.classmercharts = res.data.data
						console.log(this.classmercharts.length)
					}
				})
			},
			navTo:function(item) {
				uni.navigateTo({
					url: `/pages/classification/merchant?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.campus-item {
		position: relative;
		overflow: hidden;
		// border-top: 1px solid #f5f5f5;
		// padding: 12rpx 0;
		margin: 20rpx 0;
	}
	.Lu-class-404{
		width: 750rpx;
		height: 1334rpx;
		margin: -20rpx;
		image{
			width: 750rpx;
			height: 1334rpx;
		}
	}
	.Lu-class-body{
		padding: 20rpx;
	}
	.campus-media {
		float: left;
	
		.campus-logo {
			width: 280rpx;
			height: 200rpx;
			border-radius: 10rpx 0 0 10rpx;
			vertical-align: middle;
		}
	}
	
	.campus-body {
		margin-left: 290rpx;
		// padding-left: 20rpx;
		background-color: #fff;
		border-radius: 0 10rpx 10rpx 0;
		padding: 10rpx 0;
		vertical-align: middle;
		.campus-title {
			font-size: 30rpx;
			color: #333;
			padding-top: 2rpx;
			padding-left: 20rpx;
			margin-bottom: 14rpx;
		}
	
		.campus-desc {
			font-size: 24rpx;
			padding-left: 20rpx;
			color: #999;
			margin-bottom: 20rpx;
		}
		.campus-footer {
			font-size: 24rpx;
			color: #aaa;
			// height: 44rpx;
			// line-height: 44rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding-left: 20rpx;
		
			.iconfont {
				font-size: 24rpx;
				margin-right: 6rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>
